<template>
    <view>
      <view style="width:100%; height:400rpx">
          <l-echart ref="chartRef" @finished="init" ></l-echart>
         
      </view>
    </view>
</template>

<script>
    import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
    export default {
        props: ['dataList'],
        data() {
            return {
                option: {
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    color: ['#DF3E2F','#685AF3','#FCD71F','#FFD5B3','#8AABFF','#3427bb','#2bc7c1','#df7d27'],
                    legend: {
                      left: '0%',
                      top:'20%',
                      right: '0',
                       show:false,
                      orient: 'vertical',
                    data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return item.name ? item.name: '空'}) : [],
                      // data: ['客户数','拜访数','其他'],

                    },
                    series: [
                      {
                        name: '',
                        type: 'pie',
                        // roseType: 'radius',
                        // radius: ['50%', '50%'],
                        center: ['50%', '50%'],
                        label: {
                          formatter: '{c}\n {b} ',
                          
                        },
                        itemStyle: {
                          borderRadius: 5,
                          borderColor: '#fff',
                          borderWidth: 1
                        },
                        data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return {value: item.num,name: item.name ? item.name: '空'}}) : [],
                        // data: [
                        //     {value:30,name: '客户数'},
                        //     {value:60,name: '访问数'},
                        //     {value:40,name: '其他'},
                        //     ],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                      }
                    ]
                },
            };
        },
        // 组件能被调用必须是组件的节点已经被渲染到页面上
        methods: {
            async init() {
               
                // chart 图表实例不能存在data里
                const chart = await this.$refs.chartRef.init(echarts);
                chart.setOption(this.option)
            }
        }
    }
</script>

<style>
</style>